@import 'global';

.main{
	.announcement{
		text-align: center;
		color: #31708f;
		background-color: #d9edf7;
		border-color: #bce8f1;
		padding: 10px;
		margin: 10px 0px 10px 0px;
		border-radius: 6px;
	}

	.problem{
		overflow: hidden;
		width: 100%;
		clear: both;

		a{
			color: $theme-color;
		}

		a:hover{
			color: #31708f;
		}

		.problem-list{
			display: block;
			float: left;
			width: 70%;
			margin: 10px;

			ul{
				

				li{
					list-style: none;
					text-align: left;
				}

				.item-id{
					width: 30px;
				}
				.item-title{
					width: 430px;
				}
				.item-type{
					width: 40px;
				}
				.item-rate{
					width: 50px;
				}
				.item-time{
					width: 100px;
				}

				.list-header{
					border-bottom: 1px solid gray;
					color: $theme-color;
					font-weight: bolder;

					ul{
						overflow: hidden;

						li{
							float: left;
							padding: 8px;
						}
					}
				}

				.list-item{
					border-top: 1px solid gray;

					ul{
						overflow: hidden;

						li{
							float: left;
							padding: 8px;
						}

						
					}
				}

				.list-item:nth-child(even){
					background: #f9f9f9;
				}
			}
		}

		$cata-list-border: 1px solid #ddd;
		$list-width: 200px;
		.cata{
			display: block;
			float: right;
			max-width: 28%;

			ul{
				margin: 10px 0px;

				li{
					list-style: none;

					a{
						color: gray;
						display: block;
					}
				}
			}

			.hot{

				li{
					border: $cata-list-border;
					border-bottom: none;
					font-size: 80%;
					padding: 10px 15px;
					width: $list-width;
					line-height: 16px;
				}

				li:first-child{
					@extend .list-header;

					color: #a94442;
					background-color: #f2dede;
				}

				li:last-child{
					border-bottom-left-radius: 4px;
					border-bottom-right-radius: 4px;
					border-bottom: $cata-list-border;
				}
			}

			.tags{
				li{
					border: $cata-list-border;
					border-bottom: none;
					font-size: 80%;
					padding: 10px 15px;
					width: $list-width;
					line-height: 16px;

					&:first-child{
						@extend .list-header;
					}
					
					&:last-child{
						border-bottom-left-radius: 4px;
						border-bottom-right-radius: 4px;
						border-bottom: $cata-list-border;
					}
				}

				.item{
					a{
						.badage{
							float: right;
						}
					}
					
				}
			}

			.item:hover{
				background-color: #f5f5f5;
			}
		}
	}

	.detail{
		div{
			display: block;
			overflow: hidden;
			width: 100%;
			border-bottom: 1px solid #eee;
		}

		.problem-title{
			padding-bottom: 10px;

			h3{
				display: inline;
			}
		}
		.problem-description{
			display: block;
			border-left: 3px solid #ddd;
			padding-left: 10px;
			width: 99%;
		}
		.problem-links{
			;
		}
	}

	.submition{
		overflow: hidden;
		width: 100%;
		clear: both;

		.subm-header{
			margin: 10px 0;

			select{
				width: 100px;
				height: 34px;
				vertical-align: middle;
				padding: 6px 12px;
				border: 1px solid #ccc;
				border-radius: 4px;
				-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
				box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
				-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
				-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
				transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
			}

			.btn{
				padding: 6px 12px;
			}
		}
		.subm-editor{
			margin: 10px 0;

			#editor{
			}
		}
		.solu-submit{
			margin: 10px 0;

			.btn{
				;
			}

			.status{
				vertical-align: middle;
				
				color: white;
				padding: 0px 5px;
				margin: 0px 0px 0px 0px;
				display: inline-block;
				opacity: 0.7;

				a{
					color: white;
				}
			}
		}
	}
	
}

.sta-accept{
	background-color: green;
}

.sta-task-add{
	background-color: black;
}

.sta-error{
	background-color: red;
}

.main{

	.problem-add{
		overflow: hidden;
		width: 100%;
		clear: both;

		.box-add{
			float: left;
			width: 100%;

			li{
				list-style: none;
			}

			.item:hover{
				background-color: #FFF;
			}

			.item{
				
				form{
					.item-add-header{
						display: block;
						margin: 10px 0;
						
						div{
							border: 1px dashed $border-color;
							display: inline-block;
							vertical-align: middle;
							float: right;
							margin-top: 1px;

							label{
								cursor: pointer;
								display: block;
							}
						}

						.title{
							vertical-align: middle;
							max-width: 80%;
							min-width: 75%;
							margin: 0 10px;
						}

						.option-right{
							float: right;
							margin: 0 10px;

							input{
								vertical-align: middle;
							}
						}
					}

					.goj-editor{
						display: block;
						width: 99%;
						margin: 0 auto;
						border: 1px solid $border-color;

						textarea{
							width: 100%;
							height: 200px;
						}

					}

					.precode{
						

						#editor {
						}
						
						
					}

					.io-data{
						margin: 10px 0;

						textarea{
							resize: none;
						}
					}

					.btn{
						margin: 10px 0;
					}
				}

				.item-title{
					font-style: italic;
					display: inline-block;
					margin: 10px 0;
					width: 100%;

					small{
						color: $font-color-gray;
						margin-left: 10px;
					}
				}
			}
		}
	}
	
}